import { Dropdown } from 'antd';
import React, { ReactElement, MouseEvent, useState } from 'react';

const DropMenu: React.FC<{ menu: ReactElement }> = props => {
  const [visible, setVisible] = useState(false);
  function handleClick(e: MouseEvent, type?: string) {
    const target = e.target as HTMLElement;
    let currentId = target?.dataset?.id;
    if (!currentId) return setVisible(false);
    type ? setVisible(true) : setVisible(!visible);
  }

  return (
    <Dropdown overlay={props.menu} trigger={['contextMenu', 'click']} visible={visible}>
      <div onClick={e => handleClick(e)} onContextMenu={e => handleClick(e, 'onContextMenu')}>
        {props.children}
      </div>
    </Dropdown>
  );
};

export default DropMenu;
